import Taro, { Component } from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';
import Success from '../../../static/public/icon_success.png';
import NavigationBar from '../../../components/navigationBar/index';
import './index.scss';
import { adminInputCard, getCardInfo } from '../../../services/user';
import MultiTextModal from '../../../components/multi-text-modal/index';
import { timeFormat } from '../../../utils/utils';


export default class Index extends Component {

  config = {
    navigationBarTitleText: ''
  }

  state = {
    exchangeText: '',
    isShowModal: false,
    contentArr: null,
    cardInfo: null, // 出库的时候通过storage取值， 入库当前页面调接口
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
    title: '',
    type: -1,  // 0 入库 1 出库 - 1等待扫码
  }

  componentWillMount() {
    if (parseInt(this.$router.params.type, 10) === 0) {
      // 入库
      this.scanCodeFunc()
    } else {
      // 出库
      let outputData = Taro.getStorageSync('outputData')
      // 兑换卡数量：共20张，988型 10张；1388型5张； 2588型5张。
      let text = ''
      let total = 0
      outputData.card.forEach(item => {
        total += item.number
      })
      text = `兑换卡数量：共${total}张,`
      outputData.card.forEach(item => {
        text += `${item.name} ${item.number}张；`
      })
      this.setState({
        title: '出库成功',
        type: 1,
        cardInfo: outputData,
        exchangeText: text
      })
    }
  }
  componentDidMount() { }
  componentWillReceiveProps(nextProps, nextContext) { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  componentDidCatchError() { }
  componentDidNotFound() { }

  confirmCb() {
    adminInputCard({
      card_no: this.state.cardInfo.card_no
    }).then(res => {
      this.setState({
        title: '入库成功',
        type: 0,
        isShowModal: false,
        exchangeText: `${res.card.card_msg.goods_sku_attr_name}：${res.card.card_no}`,
        cardInfo: res,
      })
    })
  }

  cancleCb() {
    Taro.navigateBack();
  }

  scanCodeFunc() {
    let self = this
    Taro.scanCode({
      onlyFromCamera: true,
      success(res) {
        getCardInfo({
          card_no: res.result
        }).then(data => {
          let contentArr = [
            {
              key: '卡号',
              value: data.card_no
            },
            {
              key: '类型',
              value: data.attr_name
            },
            {
              key: '代理',
              value: `${data.user.nickname}(${data.user.mobile})`
            }
          ]
          self.setState({
            contentArr: contentArr,
            cardInfo: data,
            isShowModal: true,
          })
        })
      },
      fail() {
        if (self.state.type === -1) {
          Taro.navigateBack()
        }
      }
    })
  }

  goHome() {
    Taro.navigateBack({
      delta: 100 // delta 数量大于页面栈的数量则返回首页
    })
  }


  render() {
    const { isShowModal, title, type, contentArr, cardInfo } = this.state
    return (
      <View className="storage-success" style={`margin-top: ${navigationBarHeight}`}>
        {isShowModal && <MultiTextModal title="兑换卡" confirmText="入库" contentArr={contentArr} cancleCb={this.cancleCb.bind(this)} confirmCb={this.confirmCb.bind(this)} />}
        <NavigationBar text={title} />
        {type !== -1 ? <View className="success">
          <Image className="icon" src={Success} />
          <View className="tip">{title}</View>
        </View> : <View></View>}
        {type !== -1 ? <View className="storage-info">
          <View className="info">{type ? '出库信息' : '入库信息'}</View>
          <View className="value">
            {type ? '出库时间' : '入库时间'}：{timeFormat(cardInfo.time)}
          </View>
          <View className="value">{exchangeText}</View>
          {type && <View className="value">代理:{cardInfo.user.nickname}({cardInfo.user.mobile})</View>}
        </View> : <View></View>}
        {type !== -1 ? <View className="btn return" onClick={this.goHome}>返回首页</View> : <View></View>}
        {type === 0 && <View className="btn scan" onClick={this.scanCodeFunc}>继续扫描</View>}
      </View>
    );
  }
}
